<div class="main-section">
    <h1 class="main-section__title">Tabs</h1>

    <p class="main-section__intro">
        <code>lx-tabs</code> is a directive that create a navigation system with tabs.
    </p>

    <p class="main-section__warning">
        This component has been completly reworked since LumX beta version (v0.3.96).<br />Please refer to the updated documentation.
    </p>

    <lx-component lx-title="Basic" lx-path="/includes/modules/tabs/includes/basic.html" lx-js-path="/js/tabs/demo/demo-tabs_controller.js">
        One <code>lx-tab</code> directive per tab need to be transcluded.<br /><code>lx-tab</code> directive has a label or an icon as parameter and pane content as transcluded element.
    </lx-component>

    <lx-component lx-title="Styles" lx-path="/includes/modules/tabs/includes/style.html" lx-js-path="/js/tabs/demo/demo-tabs_controller.js">
        Main colors defined in <code>dist/scss/core/settings/defaults.scss</code> can be used to create colored tabs.<br />
        If theme is <code>light</code>, color will be applied to tabs label / icon and indicator. If theme is <code>dark</code>, color will be applied to tabs background and tabs label / icon will be white.
    </lx-component>

    <lx-component lx-title="Dynamic tabs" lx-path="/includes/modules/tabs/includes/dynamic.html" lx-js-path="/js/tabs/demo/demo-tabs_controller.js">
        <code>ng-repeat</code> directive can be used to loop through an array of tabs.
    </lx-component>

    <lx-component lx-title="Separate tabs and panes" lx-path="/includes/modules/tabs/includes/separate.html" lx-js-path="/js/tabs/demo/demo-tabs_controller.js">
        Tabs and panes can be separated with two directives: <code>lx-tabs</code> for tabs and <code>lx-tabs-panes</code> for panes.<br />
        It's usefull when you need to scroll into panes with fixed tabs.
    </lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-layout</td>
                    <td><code>string</code></td>
                    <td><code>full</code></td>
                    <td>Define the tabs layout. Options: <code>full</code> (tabs will share the available width), <code>inline</code> (tabs will be aligned to the left)</td>
                </tr>
                <tr>
                    <td>lx-theme</td>
                    <td><code>string</code></td>
                    <td><code>light</code></td>
                    <td>Define the tabs theme. Options: <code>light</code> (color will be applied to tabs label and indicator), <code>dark</code> (color will be applied to tabs background and tabs label / icon will be white)</td>
                </tr>
                <tr>
                    <td>lx-color</td>
                    <td><code>string</code></td>
                    <td><code>primary</code></td>
                    <td>Define the tabs color according to the theme attribute. Options: colors defined in colors and sizes section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>lx-indicator</td>
                    <td><code>string</code></td>
                    <td><code>accent</code></td>
                    <td>Define the indicator color when theme is set to <code> dark</code>. Options: colors defined in colors and sizes section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>lx-active-tab</td>
                    <td><code>integer</code></td>
                    <td></td>
                    <td>Define the active tab index.</td>
                </tr>
                <tr>
                    <td>lx-panes-id</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Target the right <code>lx-tabs-panes</code> id in seaparate mode.</td>
                </tr>
                <tr>
                    <td>links</td>
                    <td><code>object</code></td>
                    <td></td>
                    <td>Define the tabs links in seaparate mode.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>
